
<template>
    <div class="note-detail">
        <h1>{{ note.title }}</h1>
        <h5>由{{uploadname}}编辑于{{uploadtime}}</h5>
        <p v-html="note.detail"></p>
        <button class="like-button" @click="toggleLike">
            <img v-bind:src="likeIcon()" :alt=" note.title " class="like-icon">
            <span class="like-count">{{ likesTotal }}</span>
        </button>
        <button class="collect-button" @click="toggleCollect">
            <img v-bind:src="likeCollect()" alt="收藏" class="collect-icon">
            <span class="like-count">{{ collectTotal }}</span>
        </button>
        <br>
        <span>联系电话：{{ phone }}</span>
        <h2>评论：</h2>
        <div class="comments">
        <div v-for="(comment, index) in comments" :key="index" class="comment">
          <p>{{ reviewname[index] }}: {{ comment.content }}</p>
          <p style="text-align: right;font-size: 10px;">{{ comment.reviewtime }}</p>
        </div>
      </div>

      <div class="new-comment">
        <form @submit.prevent="addComment">
          <input type="text" v-model="newComment.content" placeholder="添加你的评论..." required>
          <button type="submit">提交评论</button>
        </form>
      </div>
    </div>
    
</template>


<script>
import axios from 'axios';
import Vue from 'vue';
import {getDate} from '../utils/getDate'
export default{
    data()
    {
        return{
          note:this.$route.query,
          username:null,
          phone:null,
          uploadtime:null,
          uploadname:null,
          likesTotal:0,
          collectTotal:0,
          reviewTotal:0,
          likes:false,
          collect:false,
          comments:[],
          reviewname:[],
          newComment:{
          reviewid:null,
          type:null,
          objectid:null,
          id:null,
          content:null,
          reviewtime:null
        }
        };
    },
    created()
   {
      let userid=sessionStorage.getItem("userid")
      
      axios.post(`/findIfLikes?likesid=`+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
          if(res.data){
            this.likes=true
            console.log(res.data)
          }else{
            this.likes=false
            console.log(res.data)
          }
        })
        axios.post(`/findIfCollect?collectid=`+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
          if(res.data){
            this.collect=true
            console.log(res.data)
          }else{
            this.collect=false
            console.log(res.data)
          }
        })
        axios.get(`/findLikes_total/${this.note.type}&&${this.note.objectid}`).then(res=>{
          // this.likesTotal[this.note.objectid]=(res.data.likesTotal)
          this.likesTotal=res.data.likesTotal
        })
        axios.get(`/findCollect_total/${this.note.type}&&${this.note.objectid}`).then(res=>{
          // this.collectTotal[this.note.objectid]=(res.data.collectTotal)
          this.collectTotal=res.data.collectTotal
        })
        axios.get(`/findReview_total/${this.note.type}&&${this.note.objectid}`).then(res=>{
          // this.reviewTotal[this.note.objectid]=(res.data.reviewTotal)
          this.reviewTotal=res.data.reviewTotal
        })
        axios.get(`/findReviewByObject/2&&${this.note.objectid}`).then(res=>{
          Vue.set(this,'comments',res.data)
          for(let i=0;i<this.comments.length;++i)
          axios.get(`/findUser/${this.comments[i].reviewid}`).then(res=>{
            Vue.set(this.reviewname,i,res.data.username)
            this.newComment.id=Math.max(this.newComment.id,this.comments[i].id)
          })
        })
        axios.get(`/findUser/${userid}`).then(res=>{
          this.username=res.data.username
          this.phone=res.data.phone
        })
        axios.get(`/findUpload/${this.note.type}&&${this.note.objectid}`).then(res=>{
          this.uploadtime=res.data.uploadtime
          axios.get(`/findUser/${res.data.uploadid}`).then(res=>{
            this.uploadname=res.data.username
          })
        })
        this.newComment.reviewid=userid
        this.newComment.type=2
        this.newComment.objectid=this.note.objectid
        // console.log(this.newComment)
   },
    methods:{
      toggleLike() {
          let userid=sessionStorage.getItem("userid")
          if(userid)
          {
            this.likes = !this.likes;
            if(this.likes)
            {
                axios.post("/insertlikes?likesid="+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
                  ++this.likesTotal
                  console.log(res.data)
              })
            }
            else
            {
              axios.delete("/deletelikes?likesid="+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
                --this.likesTotal
                console.log(res.data)
              })
            }
          }else{
            alert('请先登录');
            this.$router.push({
                name:'login',
            })
          }
        
      },
        toggleCollect() {
          let userid=sessionStorage.getItem("userid")
          if(userid)
          {
            this.collect = !this.collect;
            if(this.collect)
            {
                axios.post("/insertcollect?collectid="+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
                  ++this.collectTotal
                  console.log(res.data)
              })
            }
            else
            {
              axios.delete("/deletecollect?collectid="+userid+`&type=2&objectid=`+this.note.objectid).then(res=>{
                --this.collectTotal
                console.log(res.data)
              })
            }
          }else{
            alert('请先登录');
            this.$router.push({
                name:'login',
            })
          }
      },
      likeIcon() {
        return this.likes  ? require('../assets/like.png') :require('../assets/unlike.png');
      },
      likeCollect() {
        return this.collect  ? require('../assets/collect.png') :require('../assets/discollect.png');
      },

     
      addComment()
      {
        let userid=sessionStorage.getItem("userid")
        let username=this.username
        console.log(this.username)
        if(userid)
        {
          let newComment={...this.newComment}
          newComment.reviewtime = getDate()
          newComment.id=newComment.id+1
          console.log(newComment)
          this.comments.push(newComment)
          // Vue.set(this.comments,this.comments.length,newComment)
          this.reviewname.push(username)
          // Vue.set(this.reviewname,this.comments.length,username)
          axios.post(`/insertreview?reviewid=`+newComment.reviewid+`&type=`+newComment.type+`&objectid=`+newComment.objectid+`&id=`+newComment.id+`&content=`+newComment.content+`&reviewtime=`+newComment.reviewtime).then(res=>{
            this.newComment.id=this.newComment.id+1
            console.log(res.data)
          })
          this.newComment.content="";
        }else{
          alert('请先登录');
          this.$router.push({
                name:'login',
            })
        }
        
      }
    }
}



</script>
<style>
.note-detail {
    width: 80%;
    max-width: 800px; /* 设置最大宽度，防止内容过度拉伸 */
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif; /* 设置字体，增强美观性 */
}

.like-count, .collect-icon {
    margin-left: 5px;
    font-size: 12px;
    color: #666; /* 稍微调整颜色，以便与背景形成对比 */
}

.collect-status {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #333; /* 调整状态文字颜色 */
}

.like-icon, .collect-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle; /* 垂直对齐图标和文字 */
}

.collect-button, .like-button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 4px; /* 圆角边框 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); /* 按钮内部阴影 */
    text-align: center;
    vertical-align: middle;
}

.collect-button:hover, .like-button:hover {
    background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}

/* 清除浮动 */
.note-detail br {
    clear: both;
}

/* 调整h1样式，使其更加优雅 */
h1 {
    color: #333; /* 深色标题 */
    font-size: 2rem; /* 增大字体大小 */
    margin-bottom: 15px; /* 增加段落间距 */
}

/* 调整p样式，使其与h1保持一致 */
p {
    color: #555; /* 深色内容文字 */
    font-size: 1rem; /* 标准字体大小 */
    line-height: 1.6; /* 增加行高，提高可读性 */
}
.comments {
  margin-bottom: 5px;
}

.comment {
  border: 1px solid #ddd;
  padding: 0px 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.new-comment {
  margin-top: 20px;
}

.new-comment input {
  width: 70%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.new-comment button {
  padding: 10px 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.new-comment button:hover {
  background-color: #4cae4c;
}
</style>